<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
  <title>{{story.title|default('标题')}} - {{app.title}}</title>
  <meta name="Description" content="{% if story.description %}{{story.description}}{% else %}{{story.title|default('标题')}}{% endif %}"/>
  <!-- build:css /styles/base.css -->
  <link rel="stylesheet" href="/styles/base.css">
  <link rel="stylesheet" href="/components/toastr/toastr.css">
  <!-- endbuild -->
  <!-- build:js /scripts/modernizr.js -->
  <script src="/components/modernizr/modernizr.js"></script>
  <!-- endbuild -->
</head>
<body class="{{story.theme}}">
  <div class="container">
    {% if story.background %}
      <div class="section section-background" style="height:200px" data-background="{{story.background}}"></div>
    {% else %}
      <div class="section section-background" style="height:200px"></div>
    {% endif %}
    <div class="section section-header">
      {% if story.cover %}
        <div class="profile-image" style="background-image:url({{story.cover}}!avatar)">
      {% else %}
        <div class="profile-image">
      {% endif %}
      </div>
      <div class="content">
        <div class="profile">
          <h1>{{story.title|default('标题')}}</h1>
          <h3 class="link">
            <a target="_blank" href="/@{% if story.mark %}{{story.mark}}{% else %}{{story.id}}{% endif %}">starry.so/@{% if story.mark %}{{story.mark}}{% else %}{{story.id}}{% endif %}</a>
          </h3>
          {% if story.description %}<p>{{story.description|markdown|safe}}</p>{% endif %}
          <div class="nav">
            {% for section in story.sections %}
              <a href="#section-{{section.id}}">{{section.title|default('片段')}}</a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="line"></div>
    </div>
    {% for section in story.sections %}
      <div class="section" id="section-{{section.id}}">
        <div class="section-title"><span class="name">{{section.title|default('片段')}}</span></div>
        <div class="points">
          {% for point in section.points %}
            <div class="point{% if point.image %} show-picture{% endif %} swing-out">
              {{point.bubble|circle|safe}}
              <div class="point-container {{point.bubble|circle_type|safe}}">
                {% if point.link %}
                  <h3 class="title"><a target="_blank" href="{{point.link}}">{{point.title}}</a></h3>
                {% else %}
                  <h3 class="title">{{point.title}}</h3>
                {% endif %}
                <div class="point-body">{{point.description|markdown|safe}}</div>
                {% if point.image %}<div class="point-picture"><img class="picture-point-image" src="{{point.image}}!picture"></div>{% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="line"></div>
      </div>
    {% endfor %}
  </div>
  <!-- build:js /scripts/vendor.js -->
  <script src='/components/fastclick/lib/fastclick.js'></script>
  <script src="/components/jquery/dist/jquery.js"></script>
  <script src="/components/toastr/toastr.js"></script>
  <script src="/components/jquery.cookie/jquery.cookie.js"></script>
  <script src="/components/jquery.easy-pie-chart/dist/jquery.easypiechart.js"></script>
  <script src="/components/bootstrap/js/transition.js"></script>
  <script src="/components/bootstrap/js/button.js"></script>
  <script src="/components/bootstrap/js/tooltip.js"></script>
  <script src="/components/bootstrap/js/popover.js"></script>
  <script src="/scripts/setting.js"></script>
  <!-- endbuild -->
  <!-- build:js /scripts/default/show.js -->
  <script src="/scripts/default/show.js"></script>
  <!-- endbuild -->
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?f7f617f2266175a57a0ed7eb6bfd7a7c";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</body>
</html>
